<script lang="ts" setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import PlateList from './comp/PlateList/PlateList.vue'
// import HomeNav from './comp/HomeNav.vue'
import useCopyValue from './hooks/useCopyValue'
// import Icon from '@/components/Icon/src/Icon.vue'
// import HeaderNav from '@/components/HeaderNav/HeaderNav.vue'
// import HeaderNavBackup from '@/components/HeaderNav/HeaderNavBackup.vue'
// import whiteBookUrl from '@/assets/pdf/PLAYTIMEWhitePaper-EN.pdf'
const { t } = useI18n()

const contentShowName = ref('roadmap-1')
const copyValue = '0x746681150a5F0a84C8F78bA4bDE0cA98461e8117'

const { copyMessage, handleCopy } = useCopyValue()

function tab(name: string) {
  contentShowName.value = name
}

function contentShow(name: string) {
  return contentShowName.value === name
}
function toCopy() {
  handleCopy(copyValue)
}
// .translate-y-0{}
</script>
<template>
  <div class="HomeView">
    <div class="bg">
      <img src="@/assets/imgV2/exchange-bg-bottom.jpg" alt="" />
    </div>
    <div
      class="relative flex flex-col min-h-screen antialiased text-almost-white bg-night-blue font-body max-window"
    >
      <!-- <HeaderNavBackup></HeaderNavBackup> -->

      <main class="relative z-0 flex-grow" id="main">
        <section class="relative py-64 md:py-32">
          <!--<img loading="lazy"
                class="absolute right-0 w-full max-w-xl opacity-25 top-12 md:max-w-xl lg:opacity-100 lg:max-w-2xl"
                src="images/hero.webp" alt="">-->

          <div class="relative w-full max-w-6xl px-4 mx-auto sm:px-6 md:px-8">
            <header class="font-medium font-heading force-new-layer">
              <!-- <p class="text-2xl md:text-4xl text-royal-blue">
                {{ t('home.fu') }}
              </p> -->

              <h1
                class="max-w-4xl mt-6 text-4xl text-main-yellow md:text-5xl lg:text-7xl mix-blend-lighten"
              >
                {{ t('home.tu') }}
              </h1>
            </header>

            <footer class="mt-16 md:mt-32">
              <nav
                class="grid items-center max-w-4xl gap-4 mt-6 md:grid-cols-2 lg:grid-cols-3"
              >
                <a
                  class="h-auto px-12 py-4 shadow button button-primary rounded-2xl bg-neomorphic"
                  href="https://brickey2133.gitbook.io/playtimedao/"
                  target="_self"
                >
                  <svg
                    class="w-8 h-8 mr-6 -ml-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                    />
                  </svg>
                  <div class="flex-grow">
                    <h3 class="text-xl font-bold"> {{ t('home.paper') }}</h3>

                    <p class="mt-1 opacity-80">{{ t('home.pp') }}</p>
                  </div>
                </a>

                <a
                  class="h-auto px-12 py-4 shadow button button-primary rounded-2xl bg-neomorphic"
                  href="https://pancakeswap.finance/swap?outputCurrency=0x746681150a5F0a84C8F78bA4bDE0cA98461e8117&utm_source=tokenpocket"
                  target="_blank"
                >
                  <svg
                    class="w-8 h-8 mr-6 -ml-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
                    />
                  </svg>
                  <div class="flex-grow">
                    <h3 class="text-xl font-bold">{{ t('home.swap') }}</h3>

                    <p class="mt-1 opacity-80">{{ t('home.goto') }}</p>
                  </div>
                </a>

                <a
                  class="h-auto px-12 py-4 shadow button button-primary rounded-2xl bg-neomorphic"
                  href="https://t.me/PlayTime_DAO"
                  target="_self"
                >
                  <svg
                    class="w-8 h-8 mr-6 -ml-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
                    />
                  </svg>
                  <div class="flex-grow">
                    <h3 class="text-xl font-bold">{{ t('home.char') }}</h3>

                    <p class="mt-1 opacity-80">{{ t('home.cont') }}</p>
                  </div>
                </a>
              </nav>

              <nav class="flex flex-wrap items-center gap-4 mt-4 text-sm">
                <p>{{ t('home.scrollTo') }}</p>

                <a class="underline" href="#tokenomics">{{
                  t('home.tokenomics')
                }}</a>

                <a class="underline" href="#how-to-buy">{{
                  t('home.howToBuy')
                }}</a>

                <a class="underline" href="#roadmap">{{ t('home.roadmap') }}</a>
              </nav>
            </footer>
          </div>
        </section>

        <section class="md:my-24">
          <div class="w-full max-w-6xl px-4 mx-auto sm:px-6 md:px-8">
            <ul
              class="grid gap-12 text-center md:gap-8 md:grid-cols-3 text-night-blue"
            >
              <li
                class="flex flex-col items-center px-6 py-8 shadow-2xl rounded-2xl bg-main-yellow"
              >
                <img
                  loading="lazy"
                  class="-mt-16 h-120"
                  src="./icons/speaker.png"
                  alt=""
                />

                <h2 class="mt-6 text-2xl font-bold">{{
                  t('home.marketing')
                }}</h2>

                <p class="mt-2">{{ t('home.MC') }}</p>
              </li>

              <li
                class="flex flex-col items-center px-6 py-8 shadow-2xl rounded-2xl bg-main-yellow"
              >
                <img
                  loading="lazy"
                  class="-mt-16 h-120"
                  src="./icons/coins.png"
                  alt=""
                />

                <h2 class="mt-6 text-2xl font-bold">{{ t('home.repo') }}</h2>

                <p class="mt-2">{{ t('home.RC') }}</p>
              </li>

              <li
                class="flex flex-col items-center px-6 py-8 shadow-2xl rounded-2xl bg-main-yellow"
              >
                <img
                  loading="lazy"
                  class="-mt-16 h-120"
                  src="./icons/arrows.png"
                  alt=""
                />

                <h2 class="mt-6 text-2xl font-bold">{{
                  t('home.fluidity')
                }}</h2>

                <p class="mt-2">{{ t('home.FC') }}</p>
              </li>
            </ul>

            <article class="mt-12 md:mt-24">
              <p class="max-w-4xl mx-auto text-lg font-medium leading-relaxed">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ t('home.PM') }}
                {{ t('home.PMC') }}
                {{ t('home.PM') }}
                {{ t('home.DFC') }}
                {{ t('home.four') }}
                {{ t('home.MQ') }} {{ t('home.PM') }}
                {{ t('home.GD') }}
              </p>
            </article>

            <div
              class="relative flex flex-col items-center mt-12 overflow-hidden shadow-glow rounded-2xl bg-neomorphic text-night-blue"
              style="margin-top: 30px"
            >
              <img src="@/assets/img/home/metaverse.png" alt="" />
            </div>

            <div id="tokenomics" class="py-px scroll-mt">
              <div class="py-8">
                <dl
                  class="grid grid-cols-2 gap-4 py-8 md:grid-cols-3"
                  style="padding-top: 0"
                >
                  <div class="col-span-2 md:col-span-1">
                    <dt class="text-2xl font-medium text-main-yellow">{{
                      t('home.supply')
                    }}</dt>

                    <dd class="mt-1 text-2xl font-medium">
                      6,000,000,000
                      <small class="text-xs">{{ t('home.PM') }}</small>
                    </dd>

                    <!-- <dd class="mt-2 text-xs opacity-30">
                      {{ t('home.AZ') }}
                      <a
                        class="underline"
                        href="https://bscscan.com"
                        target="_blank"
                        >{{ t('home.WLB') }}</a
                      >
                    </dd> -->
                  </div>

                  <!--<div>
                    <dt class="text-2xl font-medium text-main-yellow"
                      >总持有人数</dt
                    >

                    <dd class="mt-1 text-2xl font-medium"> 5,735+ </dd>

                    <dd class="mt-2 text-xs opacity-30"> 每小时更新. </dd>
                  </div>

                  <div>
                    <dt class="text-2xl font-medium text-main-yellow"
                      >总市值</dt
                    >

                    <dd class="mt-1 text-2xl font-medium"> ￥1,673,235 </dd>

                    <dd class="mt-2 text-xs opacity-30"> 每小时更新. </dd>
                  </div>-->
                </dl>
              </div>

              <div
                class="py-px bg-gradient-to-r from-night-blue via-royal-purple to-night-blue"
              >
                <dl
                  class="flex justify-evenly gap-4 py-8 bg-night-blue text-center"
                >
                  <div>
                    <dt class="text-xl font-medium text-royal-purple">{{
                      t('home.marketing')
                    }}</dt>

                    <dd class="mt-1 text-2xl font-medium"> 3% </dd>
                    <!--<dd class="mt-1 text-2xl font-medium">
                                            6% <small class="text-sm opacity-80">on sell</small>
                                        </dd>-->
                  </div>
                  <div>
                    <dt class="text-xl font-medium text-royal-purple">{{
                      t('home.fluidity')
                    }}</dt>
                    <dd class="mt-1 text-2xl font-medium"> 3% </dd>
                  </div>
                  <div>
                    <dt class="text-xl font-medium text-royal-purple">{{
                      t('home.repo')
                    }}</dt>

                    <dd class="mt-1 text-2xl font-medium"> 7% </dd>
                  </div>
                </dl>
              </div>
            </div>

            <PlateList />

            <div class="max-w-3xl mx-auto" style="margin-top: 30px">
              <h2
                id="how-to-buy"
                class="text-3xl font-medium text-main-yellow scroll-mt"
                >{{ t('home.HQDB') }}</h2
              >

              <ol
                class="pl-6 mt-8 space-y-3 list-decimal marker:text-main-yellow marker:font-medium"
              >
                <li class="pl-4">
                  {{ t('home.LJQB') }}

                  <a
                    class="underline"
                    href="https://metamask.io/"
                    target="_blank"
                    >Metamask</a
                  >
                  {{ t('home.or') }}

                  <a
                    class="underline"
                    href="https://trustwallet.com/"
                    target="_blank"
                    >Trust Wallet</a
                  >
                </li>

                <li class="pl-4"> {{ t('home.CRQB') }} </li>

                <li class="pl-4"> {{ t('home.ZHC') }}</li>

                <li class="pl-4">
                  {{ t('home.jump') }}
                  <a
                    class="underline"
                    href="https://pancakeswap.finance/swap?outputCurrency=0x746681150a5F0a84C8F78bA4bDE0cA98461e8117&utm_source=tokenpocket"
                    target="_blank"
                    >Pancakeswap V2</a
                  >
                </li>

                <li class="pl-4">
                  {{ t('home.search') }}
                  <b class="text-main-yellow">PLAY</b>
                  {{ t('home.contract') }}

                  <label class="sr-only" for="address">
                    {{ t('home.copy') }}</label
                  >

                  <div
                    class="flex items-center max-w-lg mt-2 transition border rounded-lg border-royal-purple focus-within:ring-2 focus-within:ring-royal-purple"
                    style="padding-left: 12px"
                  >
                    <div class="flex flex-1">
                      <div class="flex-1 relative">
                        <div
                          class="overflow-hidden absolute w-full"
                          style="text-overflow: ellipsis"
                          >{{ copyValue }}</div
                        >
                      </div>
                      <div>{{ copyValue.substring(copyValue.length - 4) }}</div>
                      <!-- <input
                        class="px-3 bg-transparent border-0 border-r h-11 border-royal-purple focus:outline-none focus:ring-0"
                        style="width: 100%"
                        readonly
                        id="address"
                        :value="copyValue"
                        type="text"
                      /> -->
                    </div>

                    <button
                      title="Copy address"
                      type="button"
                      @click="toCopy"
                      class="flex items-center justify-center transition rounded-r-lg h-11 w-11 text-royal-purple focus:outline-none focus:ring-2 focus:ring-royal-purple"
                    >
                      <svg
                        class="w-5 h-5"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                      >
                        <path
                          d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z"
                        />
                        <path
                          d="M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z"
                        />
                      </svg>
                    </button>
                  </div>

                  <p class="mt-1.5 text-sm text-white/80" v-show="copyMessage">
                    {{ copyMessage }}</p
                  >
                </li>

                <li class="pl-4"> {{ t('home.handling') }} </li>

                <li class="pl-4"> {{ t('home.SZJE') }} </li>

                <li class="pl-4">{{ t('home.QR') }} </li>
              </ol>
            </div>

            <div
              class="p-6 mt-12 shadow-2xl md:p-12 md:mt-24 bg-midnight-blue rounded-2xl"
              x-data="tabs('roadmap-3')"
            >
              <h2
                id="roadmap"
                class="text-3xl font-medium text-main-yellow scroll-mt"
                >{{ t('home.roadmap') }}</h2
              >

              <ul
                class="flex items-center gap-8 mt-6 overflow-x-auto text-xl font-medium whitespace-nowrap text-dusk-gray"
              >
                <li>
                  <button
                    type="button"
                    class="inline-block pb-2 transition border-b hover:text-almost-white focus:outline-none focus:border-royal-purple"
                    @click="tab('roadmap-1')"
                    >{{ t('home.Q1') }}</button
                  >
                </li>
                <li>
                  <button
                    type="button"
                    class="inline-block pb-2 transition border-b hover:text-almost-white focus:outline-none focus:border-royal-purple"
                    @click="tab('roadmap-2')"
                    >{{ t('home.Q2') }}</button
                  >
                </li>
                <li>
                  <button
                    type="button"
                    class="inline-block pb-2 transition border-b hover:text-almost-white focus:outline-none focus:border-royal-purple"
                    @click="tab('roadmap-3')"
                    >{{ t('home.Q3') }}</button
                  >
                </li>
                <li>
                  <button
                    type="button"
                    class="inline-block pb-2 transition border-b hover:text-almost-white focus:outline-none focus:border-royal-purple"
                    @click="tab('roadmap-4')"
                    >{{ t('home.Q4') }}</button
                  >
                </li>
              </ul>

              <div class="mt-6">
                <section class="space-y-6" v-show="contentShow('roadmap-1')">
                  <ul class="space-y-3">
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="flex items-center justify-end w-6 h-6 border rounded-full border-main-yellow"
                      >
                        <svg
                          class="w-6 h-6"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M5 13l4 4L19 7"
                          />
                        </svg>
                      </div>

                      <p class="flex-1 text-main-yellow"
                        >1、{{ t('home.QD') }}</p
                      >
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="flex items-center justify-end w-6 h-6 border rounded-full border-main-yellow"
                      >
                        <svg
                          class="w-6 h-6"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M5 13l4 4L19 7"
                          />
                        </svg>
                      </div>

                      <p class="flex-1 text-main-yellow"
                        >2、{{ t('home.put') }}</p
                      >
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="flex items-center justify-end w-6 h-6 border rounded-full border-main-yellow"
                      >
                        <svg
                          class="w-6 h-6"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M5 13l4 4L19 7"
                          />
                        </svg>
                      </div>

                      <p class="flex-1 text-main-yellow"
                        >3、{{ t('home.PPYS') }}</p
                      >
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="flex items-center justify-end w-6 h-6 border rounded-full border-main-yellow text-night-blue"
                      >
                        <svg
                          class="w-6 h-6"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M5 13l4 4L19 7"
                          />
                        </svg>
                      </div>

                      <p class="flex-1 text-main-yellow"
                        >4、{{ t('home.KSYX') }}</p
                      >
                    </li>
                  </ul>
                </section>
                <section class="space-y-6" v-show="contentShow('roadmap-2')">
                  <ul class="space-y-3">
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="flex items-center justify-end w-6 h-6 border rounded-full border-main-yellow"
                      >
                      </div>

                      <p class="flex-1 text-main-yellow"
                        >1、{{ t('home.FB') }}</p
                      >
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="flex items-center justify-end w-6 h-6 border rounded-full border-main-yellow"
                      >
                      </div>

                      <p class="flex-1 text-main-yellow"
                        >2、{{ t('home.CGSS') }}</p
                      >
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="flex items-center justify-end w-6 h-6 border rounded-full border-main-yellow text-night-blue"
                      >
                      </div>

                      <p class="flex-1 text-main-yellow"
                        >3、{{ t('home.CMSS') }}</p
                      >
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="flex items-center justify-end w-6 h-6 border rounded-full border-main-yellow text-night-blue"
                      >
                      </div>

                      <p class="flex-1 text-main-yellow"
                        >4、{{ t('home.FBYX') }}</p
                      >
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="flex items-center justify-end w-6 h-6 border rounded-full border-main-yellow text-night-blue"
                      >
                      </div>

                      <p class="flex-1 text-main-yellow"
                        >5、{{ t('home.FBAZ') }}</p
                      >
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="flex items-center justify-end w-6 h-6 border rounded-full border-main-yellow text-night-blue"
                      >
                      </div>

                      <p class="flex-1 text-main-yellow"
                        >6、{{ t('home.FBPG') }}</p
                      >
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="flex items-center justify-end w-6 h-6 border rounded-full border-main-yellow text-night-blue"
                      >
                      </div>

                      <p class="flex-1 text-main-yellow"
                        >7、{{ t('home.SSSX') }}</p
                      >
                    </li>
                  </ul>
                </section>
                <section class="space-y-6" v-show="contentShow('roadmap-3')">
                  <ul class="space-y-3">
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="w-6 h-6 border rounded-full border-royal-purple"
                      >
                      </div>

                      <p class="flex-1">1、{{ t('home.JYS') }}</p>
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="w-6 h-6 border rounded-full border-royal-purple"
                      >
                      </div>

                      <p class="flex-1">2、{{ t('home.XMHZ') }}</p>
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="w-6 h-6 border rounded-full border-royal-purple"
                      >
                      </div>

                      <p class="flex-1">3、{{ t('home.YSYY') }}</p>
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="w-6 h-6 border rounded-full border-royal-purple"
                      >
                      </div>

                      <p class="flex-1">4、{{ t('home.YXQD') }}</p>
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="w-6 h-6 border rounded-full border-royal-purple"
                      >
                      </div>

                      <p class="flex-1">5、{{ t('home.FBXl') }}</p>
                    </li>
                    <li class="flex items-center gap-3 font-medium">
                      <div
                        class="w-6 h-6 border rounded-full border-royal-purple"
                      >
                      </div>

                      <p class="flex-1">6、{{ t('home.ZSB') }}</p>
                    </li>
                  </ul>
                </section>
                <section class="space-y-6" v-show="contentShow('roadmap-4')">
                  <div class="prose">
                    <p>{{ t('home.JMC') }}</p>
                  </div>

                  <ul class="space-y-3"> </ul>
                </section>
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer class="py-6 text-sm font-medium bg-footer">
        <div class="w-full px-4 mx-auto max-w-7xl sm:px-6 md:px-8">
          <!--<nav
            class="flex flex-col gap-6 md:items-center md:justify-between md:flex-row"
          >
            <HomeNav class="flex flex-wrap items-center gap-4"></HomeNav>

            <p class="opacity-80">&copy; PLAYTIME coin</p>
          </nav>-->
          <a href="https://t.me/PlayTimeDAO">
            {{ t('home.Customer') }}
            <!-- <Icon icon="mdi:telegram"></Icon> -->
          </a>
          <p> {{ t('home.Email') }}：service@playtimedao.io </p>
          <p class="opacity-80">&copy; PLAYTIME coin</p>
        </div>
      </footer>
    </div>
  </div>
</template>
